<template>
    <div class="xjyouhuinavbox">
        <div class="xjyouhuinavtitle"><span>优惠券</span></div>
        <div class="xjyouhuinavcontent">
            <!-- <div class="xjselectlink">
				<p>
					<el-select v-model="value" placeholder="请选择" @change="selectnav">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</p>
			</div> -->
            <div class="xjselectlink" v-for="(item, index) in youhuinav" :key="index">
                <p>
                    <el-input v-model="item.title"></el-input>
                </p>
                <!-- <p>
					<el-button class="xjbutton" size="mini" @click="setbutton(index)">选择图标</el-button>
				</p> -->
                <p>
                    <el-button size="mini" @click="setLink(index)">选择优惠券</el-button>
                </p>
            </div>
        </div>
        <el-dialog title="选择优惠券" :visible.sync="dialogVisible" width="90%" :modal="false" style=" margin-left: 1150px ">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
            >
                  <el-table-column prop="name" label="优惠券名称"></el-table-column>
                <el-table-column label="类型">
                    <template slot-scope="scope">
                     <span class="red">{{ scope.row.menkan_price > 0 ? ' 满减卷' : '无门槛卷' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠内容">
                    <template slot-scope="scope">
                        {{
                            scope.row.menkan_price > 0
                                ? '满' + scope.row.menkan_price + '减' + scope.row.jian_price
                                : '减' + scope.row.jian_price
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="已领取/优惠券总量">
                    <template slot-scope="scope">
                       {{ scope.row.yl_number + '/' + scope.row.number }}
                    </template>
                </el-table-column>
                <el-table-column prop="use_number" label="已使用"></el-table-column>
				<el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="toggleSelection(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
			<el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="querys.page"
                        :page-size="querys.rows"
                        :total="courseListTotal"
                        @current-change="coursePageChange"
                    ></el-pagination>
        </el-dialog>
        <uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
        <xjsetlink ref="xjsetlinkcom" v-on:childByLinkValue="childByLinkValue"></xjsetlink>
    </div>
</template>

<script>
import uploadimage from '@/components/common/uploadimage.vue';
import xjsetlink from '@/components/shop/xjsetlink.vue';
import { getSysButton, getshowuploadicon, couponListData } from '../../api/index.js';
export default {
    props: ['youhuinav'],
    components: {
        uploadimage,
        xjsetlink
    },
    data() {
        return {
            tableData: [],
            iconform: {},
            options: [
                {
                    value: 3,
                    label: '3列'
                },
                {
                    value: 4,
                    label: '4列'
                },
                {
                    value: 5,
                    label: '5列'
                }
            ],
            value: 4,
            dialogVisible: false,
            sysbtnlist: [],
            nowindex: 0,
            querys: {
                page: 1,
                rows: 4,
                keyword: ''
            },
			courseListTotal: 0
        };
    },
    methods: {
		coursePageChange(val) {
            this.querys.page=val
            this.setLink();
        },
        selectnav() {
            switch (this.value) {
                case 3:
                    if (this.$parent.nowitem.youhuinavimg.length == 4) {
                        this.$parent.nowitem.youhuinavimg.pop();
                    } else if (this.$parent.nowitem.youhuinavimg.length == 5) {
                        this.$parent.nowitem.youhuinavimg.splice(3, 2);
                    }
                    break;
                case 4:
                    if (this.$parent.nowitem.youhuinavimg.length == 3) {
                        this.$parent.nowitem.youhuinavimg.push({ text: '自定义4', name: 'photo', src: '', purl: '', url: '' });
                    } else if (this.$parent.nowitem.youhuinavimg.length == 5) {
                        this.$parent.nowitem.youhuinavimg.pop();
                    }
                    break;
                case 5:
                    if (this.$parent.nowitem.youhuinavimg.length == 3) {
                        this.$parent.nowitem.youhuinavimg.push({ text: '自定义4', name: 'photo', src: '', purl: '', url: '' });
                        this.$parent.nowitem.youhuinavimg.push({ text: '自定义5', name: 'photo', src: '', purl: '', url: '' });
                    } else if (this.$parent.nowitem.youhuinavimg.length == 4) {
                        this.$parent.nowitem.youhuinavimg.push({ text: '自定义5', name: 'photo', src: '', purl: '', url: '' });
                    }
                    break;
            }
        },
        async setLink(index) {
            this.dialogVisible = true;
            this.nowindex = index;
            let rst = await couponListData(this.querys);
            console.log(rst);
            this.tableData = rst.data.list;
			this.courseListTotal = rst.data.count;
            // this.$refs.xjsetlinkcom.dialogVisible=true;
        },
        setbutton(index) {
            this.nowindex = index;
            this.dialogVisible = true;
            console.log(11111);
        },
        selectsysbtn(item) {
            console.log(item);
            this.$parent.nowitem.youhuinavimg[this.nowindex].src = item.src;
            // this.$parent.nowitem.youhuinavimg[this.nowindex].name=item.name;
            // this.$parent.nowitem.youhuinavimg[this.nowindex].color=item.color;
            this.dialogVisible = false;
        },
        updateuploadimg() {
            //显示上传组件
            this.$refs.uploadimagecom.dialogVisible = true; //显示上传对话框
        },
		toggleSelection(row){
			console.log(row)
			this.$parent.nowitem.youhuinavimg[this.nowindex].menkan_price =row.menkan_price;
            this.$parent.nowitem.youhuinavimg[this.nowindex].jian_price = row.jian_price;
            this.$parent.nowitem.youhuinavimg[this.nowindex].id = row.id;
            this.$parent.nowitem.youhuinavimg[this.nowindex].title = row.name;
		},
        childByImageValue: function (childValue) {
            this.$parent.nowitem.youhuinavimg[this.nowindex].name = '';
            this.$parent.nowitem.youhuinavimg[this.nowindex].src = childValue;
        },
        childByLinkValue(childValue) {
            this.$parent.nowitem.youhuinavimg[this.nowindex].title = childValue.title;
            this.$parent.nowitem.youhuinavimg[this.nowindex].url = childValue.url;
        },
        async query() {
            let rst = await getshowuploadicon();
            console.log(rst);
            this.iconform = rst.data;
        }
    },
    computed: {},
    mounted() {
        this.query();
        getSysButton().then((res) => {
            this.sysbtnlist = res.list;
        });
    }
};
</script>

<style lang="scss">
//@import "@/assets/css/common.scss";
.xjyouhuinavbox {
    width: 350px;
    display: flex;
    flex-direction: column;
    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 100px !important;
        height: 100px !important;
        text-align: center;
    }

    .avatar-uploader:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 100px;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
    .xjbutton {
        background-color: $shenlv;
        color: white;
        display: inline-block;
    }
    .sysspan {
        font-size: 18px;
        font-weight: 600;
        margin-top: 10px;
    }
    .sysbutton {
        margin-top: 5px;
        .sysbtnpos {
            margin-right: 5px;
            margin-bottom: 5px;
        }
    }
    .xjyouhuinavtitle {
        width: 100%;
        height: 30px;
        background-color: $danlv;
        border: 1px solid $qianlv;

        span {
            margin-left: 10px;
            font-size: 12px;
            line-height: 30px;
            color: $shenlv;
        }
    }

    .xjyouhuinavcontent {
        width: 100%;
        // height: 100%;
        background-color: white;
        border: 1px solid $qianlv;

        .xjselectlink {
            margin-top: 20px;
            margin-bottom: 20px;

            p {
                margin-top: 3px;
                font-size: 12px;
                margin-left: 15px;
                input {
                    height: 35px;
                    width: 300px;
                }
            }
        }

        .van-uploader__wrapper {
            flex-direction: column;
        }
    }
}
// .el-dialog {
//     margin-left: 1200px ;
// }
</style>
